<template>
  <div>
    <a-row :gutter="24">
      <!-- 总销售额 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.total-sales')" total="￥126,560">
          <template #action>
            <a-tooltip>
              <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
              <info-circle-outlined />
            </a-tooltip>
          </template>
          <div>
            <trend flag="up" style="margin-right: 16px;" :percentage="12" :type="true">
              <template #term>
                <span>{{ $t('dashboard.analysis.week') }}</span>
              </template>
            </trend>
            <trend flag="down" :percentage="11">
              <template #term>
                <span>{{ $t('dashboard.analysis.day') }}</span>
              </template>
            </trend>
          </div>
          <template #footer>
            {{ $t('dashboard.analysis.day-sales') }}
            <span>234.56</span>
          </template>
        </chart-card>
      </a-col>
      <!-- 访问量-->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.visits')" total="8,846">
          <template #action>
            <a-tooltip>
              <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
              <info-circle-outlined />
            </a-tooltip>
          </template>
          <mini-area id="day-visits" />
          <template #footer>
            {{ $t('dashboard.analysis.day-visits') }}
            <span>{{ '1,234' }}</span>
          </template>
        </chart-card>
      </a-col>
      <!-- 支付笔数 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.payments')" total="6,560">
          <template #action>
            <a-tooltip>
              <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
              <info-circle-outlined />
            </a-tooltip>
          </template>
          <div>
            <mini-bar id="payments" />
          </div>
          <template #footer>
            {{ $t('dashboard.analysis.conversion-rate') }}
            <span>60%</span>
          </template>
        </chart-card>
      </a-col>
      <!-- 运营活动效果 -->
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" :title="$t('dashboard.analysis.operational-effect')" total="78%">
          <template #action>
            <a-tooltip>
              <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
              <info-circle-outlined />
            </a-tooltip>
          </template>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
          </div>
          <template #footer>
            <trend flag="down" style="margin-right: 16px;" :percentage="12">
              <template #term>{{ $t('dashboard.analysis.week') }}</template>
            </trend>
            <trend flag="up" :percentage="80" :type="true">
              <template #term>{{ $t('dashboard.analysis.day') }}</template>
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <!-- 销售额.访问量 -->
    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <template #rightExtra>
            <div class="extra-wrapper">
              <div class="extra-item">
                <a>{{ $t('dashboard.analysis.all-day') }}</a>
                <a>{{ $t('dashboard.analysis.all-week') }}</a>
                <a>{{ $t('dashboard.analysis.all-month') }}</a>
                <a>{{ $t('dashboard.analysis.all-year') }}</a>
              </div>
              <a-range-picker :style="{ width: '256px' }" />
            </div>
          </template>
          <a-tab-pane loading="true" :tab="$t('dashboard.analysis.sales')" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData" :title="$t('dashboard.analysis.sales-trend')" id="sales" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <RankList :title="$t('dashboard.analysis.sales-ranking')" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane :tab="$t('dashboard.analysis.visits')" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :data="barData2" :title="$t('dashboard.analysis.visits-trend')" id="visits" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <RankList :title="$t('dashboard.analysis.visits-ranking')" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <!-- 线上热门搜索 -->
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :loading="loading" :bordered="false" :title="$t('dashboard.analysis.online-top-search')"
            :style="{ height: '100%' }">
            <template #extra>
              <a-dropdown :trigger="['click']" placement="bottomLeft">
                <a class="ant-dropdown-link" href="#">
                  <ellipsis-outlined />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
            <a-row :gutter="68">
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                <number-info :total="12321" :sub-total="17.1">
                  <template #subtitle>
                    <span>{{ $t('dashboard.analysis.search-users') }}</span>
                    <a-tooltip>
                      <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
                      <info-circle-outlined :style="{ marginLeft: '8px' }" />
                    </a-tooltip>
                  </template>
                </number-info>
                <div>
                  <mini-smooth-area :data="searchUserData" id="search-users" />
                </div>
              </a-col>
              <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px' }">
                <number-info :total="2.7" :sub-total="26.2" status="down">
                  <template #subtitle>
                    <span>{{ $t('dashboard.analysis.per-capita-search') }}</span>
                    <template>
                      <a-tooltip>
                        <template #title>{{ $t('dashboard.analysis.introduce') }}</template>
                        <info-circle-outlined :style="{ marginLeft: '8px' }" />
                      </a-tooltip>
                    </template>
                  </template>
                </number-info>
                <div>
                  <mini-smooth-area :data="searchUserData" id="per-capita-search" />
                </div>
              </a-col>
            </a-row>
            <div class="ant-table-wrapper">
              <a-table row-key="index" size="small" :columns="searchTableColumns" :dataSource="searchData"
                :pagination="{ pageSize: 5 }">
                <template #bodyCell="{ column, text }">
                  <template v-if="column.key === 'range'">
                    <trend :type="text.status !== 0" :percentage="text.range" />
                  </template>
                </template>
              </a-table>
            </div>
          </a-card>
        </a-col>
        <!-- 销售额类别占比 -->
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false"
            :title="$t('dashboard.analysis.the-proportion-of-sales')" :style="{ height: '100%' }">
            <template #extra>
              <div style="height: inherit;">
                <span class="dashboard-analysis-iconGroup">
                  <a-dropdown :trigger="['click']" placement="bottomLeft">
                    <ellipsis-outlined class="ant-dropdown-link" />
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-one') }}</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;">{{ $t('dashboard.analysis.dropdown-option-two') }}</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </span>
                <div class="analysis-salesTypeRadio">
                  <a-radio-group v-model:value="salesTypeRadio">
                    <a-radio-button value="a">{{ $t('dashboard.analysis.channel.all') }}</a-radio-button>
                    <a-radio-button value="b">{{ $t('dashboard.analysis.channel.online') }}</a-radio-button>
                    <a-radio-button value="c">{{ $t('dashboard.analysis.channel.stores') }}</a-radio-button>
                  </a-radio-group>
                </div>
              </div>
            </template>
            <h4>{{ $t('dashboard.analysis.sales') }}</h4>
            <div>
              <div>
                <Pie id="salesPie" :data="sourceData" />
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup name="Analysis">
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
import { isMobile } from '@/utils/device'
import { InfoCircleOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
import ChartCard from './components/Charts/ChartCard.vue'
import Trend from './components/Charts/Trend.vue'
import MiniArea from './components/Charts/MiniArea.vue'
import MiniBar from './components/Charts/MiniBar.vue'
import MiniProgress from './components/Charts/MiniProgress.vue'
import RankList from './components/Charts/RankList.vue'
import Bar from './components/Charts/Bar.vue'
import NumberInfo from './components/NumberInfo/NumberInfo.vue'
import MiniSmoothArea from './components/Charts/MiniSmoothArea.vue'
import Pie from './components/Charts/Pie.vue'

// info:todo:当g2设置 {yAxis: false,smooth: true}时,会出现最高点显示不全的问题,官网示例也是如此,解决方法:设置中加padding: [5, 0, 0, 0]
const { t } = useI18n()
// created
const loading = ref<boolean>(true)
setTimeout(() => {
  loading.value = !loading.value
}, 500)

const barData: any = []
const barData2: any = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
  barData2.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200
  })
}

const rankList: any = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const searchUserData: any = []
for (let i = 0; i < 7; i++) {
  searchUserData.push({
    x: dayjs().add(i, 'days').format('YYYY-MM-DD'),
    y: Math.ceil((Math.random() + 1) * 10)
  })
}
const searchUserScale = [
  {
    dataKey: 'x',
    alias: '时间'
  },
  {
    dataKey: 'y',
    alias: '用户数',
    min: 0,
    max: 10
  }
]

const searchData: any = []
for (let i = 0; i < 50; i += 1) {
  searchData.push({
    index: i + 1,
    keyword: `搜索关键词-${i}`,
    count: Math.floor(Math.random() * 1000),
    range: Math.floor(Math.random() * 100),
    status: Math.floor((Math.random() * 10) % 2)
  })
}

const sourceData = [
  { item: '家用电器', count: 32.2 },
  { item: '食用酒水', count: 21 },
  { item: '个护健康', count: 17 },
  { item: '服饰箱包', count: 13 },
  { item: '母婴产品', count: 9 },
  { item: '其他', count: 7.8 }
]

const searchTableColumns = computed(() => [
  {
    dataIndex: 'index',
    title: t('dashboard.analysis.table.rank'),
    width: 90
  },
  {
    dataIndex: 'keyword',
    title: t('dashboard.analysis.table.search-keyword')
  },
  {
    dataIndex: 'count',
    title: t('dashboard.analysis.table.users')
  },
  {
    key: 'range',
    title: t('dashboard.analysis.table.weekly-range'),
    align: 'right',
    sorter: (a, b) => a.range - b.range
  }
])

const salesTypeRadio = ref<string>('a')
</script>

<style lang="less" scoped>
@import '@/style/index.less';

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);

  ::v-deep(.ant-card-head) {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
  }
}

.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}

::v-deep(.ant-table-row) {
  color: rgba(0, 0, 0, 0.65);

  &:hover {
    background-color: #fff1f0;
  }
}

::v-deep(.ant-table-tbody) {
  &>tr.ant-table-row:hover {
    &>td {
      background-color: #fff1f0;
    }
  }
}

.darkMode {
  .dashboard-analysis-iconGroup {
    i {
      color: @dark-deactive-font-color;
    }
  }

  .ant-table-wrapper {
    ::v-deep(.ant-table-cell) {
      color: @dark-deactive-font-color;
    }

    ::v-deep(.ant-table-tbody) {
      .ant-table-row:hover {
        background-color: rgb(38, 38, 38) !important;
      }
    }
  }
}
</style>
